<template>
  <div :loading="loading">
    <el-cascader v-model="selecteds" :options="options" :size="size" :props="{lazy: true, lazyLoad: lazyLoad}" style="width:100%" clearable filterable @change="handleChange" />
    <el-input v-if="hasAddr" v-model="addr" :size="size" placeholder="请输入地址" maxlength="128" show-word-limit clearable @change="onChange">
      <template slot="prepend">地址</template>
    </el-input>
    <el-input v-if="hasLinker" v-model="linker" :size="size" placeholder="请输入联系人" maxlength="64" show-word-limit clearable @change="onChange">
      <template slot="prepend">联系人</template>
    </el-input>
    <el-input v-if="hasLinker" v-model="phone" :size="size" placeholder="请输入联系电话" maxlength="32" show-word-limit clearable @change="onChange">
      <template slot="prepend">联系电话</template>
    </el-input>
  </div>
</template>

<script>
import api from '@/api/service'

export default {
  model: {
    prop: 'address',
    event: 'return'
  },
  props: {
    address: {
      type: Object,
      default: () => {
        return {
          province: '',
          city: '',
          district: '',
          street: '',
          address: '',
          linker: '',
          phone: ''
        }
      }
    },
    size: {
      type: String,
      default: 'small'
    },
    hasAddr: {
      type: Number,
      default: 1
    },
    hasLinker: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      addr: '',
      linker: '',
      phone: '',
      loading: false,
      options: [],
      selecteds: []
    }
  },
  watch: {
    address: {
      handler(newValue, oldValue) {
        // console.log('watch', 'newValue=' + JSON.stringify(newValue) + ',oldValue=' + JSON.stringify(oldValue))
        if (!newValue || !newValue.province || !newValue.city) { //  || !newValue.district
          this.selecteds = []
          this.addr = ''
        } else {
          if (!oldValue || !oldValue.province || !oldValue.city) { // || !oldValue.district
            this.selecteds = [newValue.province, newValue.city, newValue.district]
            this.addr = newValue.address ? newValue.address : ''
          } else if (newValue.province !== oldValue.province || newValue.city !== oldValue.city || newValue.district !== oldValue.district) {
            this.selecteds = [newValue.province, newValue.city, newValue.district]
            this.addr = newValue.address ? newValue.address : ''
          }
        }
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    lazyLoad(node, resolve) {
      const nodes = []
      api.getListPage('region', { pageSize: 100, idAsc: 1, params: { parentId: node.value ? node.value : '1', showFlag: 'isLeaf' }}).then(res => {
        // this.loading = false
        res.data.forEach(element => {
          var data = {
            value: element.id,
            label: element.name,
            leaf: !!element.isLeaf
          }
          nodes.push(data)
        })
        // 通过调用resolve将子节点数据返回，通知组件数据加载完成
        resolve(nodes)
      })
    },
    onChange(val) {
      // console.log('onChange', val)
      this.$emit('return', {
        province: this.address.province,
        city: this.address.city,
        district: this.address.district,
        street: this.address.street,
        address: this.addr ? this.addr : (this.address.address ? this.address.address : ''),
        linker: this.linker ? this.linker : (this.address.linker ? this.address.linker : ''),
        phone: this.phone ? this.phone : (this.address.phone ? this.address.phone : '')
      })
    },
    handleChange(val) {
      console.log('handleChange', val)
      this.address.province = val[0]
      this.address.city = val[1]
      this.address.district = val[2] ? val[2] : ''
      this.$emit('return', {
        province: this.address.province,
        city: this.address.city,
        district: this.address.district,
        street: this.address.street,
        address: this.addr ? this.addr : (this.address.address ? this.address.address : ''),
        linker: this.linker ? this.linker : (this.address.linker ? this.address.linker : ''),
        phone: this.phone ? this.phone : (this.address.phone ? this.address.phone : '')
      })
    }
  }
}
</script>
